<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../node_modules/vue/dist/vue.js"></script>
    <script src="../../node_modules/vuex/dist/vuex.min.js"></script>
</head>
<body>

<div id="app">
  <h2>{{ msg }}</h2>

  <!--<counter></counter>-->

  <!-- 父子组件之间的通讯（但是组件嵌套组件，非常麻烦） -->
  <counter v-bind:count="count"></counter>
</div>

<script>
  // 组件
  const counter = {
    template:`
      <div>{{ count }}</div>
    `,
//    computed: {
//      count() {
//        // 是要是new Vuex都用this.$store获取
//        return this.$store.state.count;
//      }
//    }
    props:['count']
  };

  // 创建一个Vuex
  const storeVuex = new Vuex.Store({
    // 状态
    state: {
      count: 0
    }
  });


  new Vue({
    el: '#app',
//    store: storeVuex,
    data: {
      count: 15,
      msg:'vuex的使用'
    },
    components: {
      counter
    }
  })
</script>

</body>
</html>
